import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../store/actions';
import {getList} from "../../api"
import "./style.scss"
class Index extends Component {
    async getAndSet(){
        const {dispatch}=this.props
        const resp=await getList()
        const action=actions.getList(resp.data.data)
        dispatch(action)
    }
    componentDidMount(){
        this.getAndSet()
    }
    delete(v){
        const {dispatch}=this.props
        const action=actions.deleteBtn(v.id)
        dispatch(action)
    }
    render() {
        const {list}=this.props
        return (
            <div className='listWrap'>
                {
                    list.length&&list.map((v,i)=>{
                        return(
                            <div key={i} className='btn'>
                                <img src={v.icons} alt="" />
                                <b>{v.tit}</b><span className='dele' onClick={()=>this.delete(v)}>×</span></div>
                        )
                    })
                }
            </div>
        );
    }
}
const mapStateToProps = state => {
    return{
        ...state
    }
}

const mapDispatchToProps =dispatch=> {
    return{
        dispatch
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Index);

